<template>
    <div>
        <van-nav-bar title="商品列表" left-text="返回" left-arrow @click-left="() => { $router.push('/home/classify') }" />
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="20">
                <router-link :to="'/detail/' + item.goods_id" v-for="item in list" :key="item">
                    <van-card :price="item.goods_price" :title="item.goods_name" :thumb="item.goods_big_logo" />
                </router-link>
            </van-list>
        </van-pull-refresh>

    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import axios from '../request/index'
import { showToast } from 'vant';
import { useRoute } from 'vue-router'
const route = new useRoute()
const listinfo = reactive({
    pagenum: '',
    pagesize: '',
})
const total = ref(0)
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
    if (refreshing.value) {
        list.value = [];
        refreshing.value = false;
        listinfo.pagenum = 1;
        total.value = 0
    }
    const maxpage = Math.ceil(total.value / listinfo.pagesize)
    if (maxpage == 0) {
        console.log('第一次进入')
    } else {
        if (listinfo.pagenum >= 3) {
            showToast('没有更多数据了')
            finished.value = true;
            return
        } else {
            listinfo.pagenum++
        }
    }
    axios.get('https://api-hmugo-web.itheima.net/api/public/v1/goods/search', {
        params: {
            cid: route.query.cid,
            ...listinfo
        }
    }).then(res => {
        list.value = list.value.concat(res.data.message.goods)
        total.value = res.data.message.total
        loading.value = false;
    })
};

const onRefresh = () => {
    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    onLoad();
};

</script>

<style lang="scss" scoped></style>